<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas id="drawing" width="300" height="300"></canvas>
  <script>
    const drawing = document.getElementById('drawing')
    // if(drawing.getContext){
    //   let context = drawing.getContext('2d')
    //   context.fillStyle = 'red'
    //   context.fillRect(10,10,50,50)
    //   context.fillStyle = "rgba(0,0,255,0.5)"
    //   context.fillRect(30,30,50,50)

    //   const url = drawing.toDataURL('image/png')
    //   let image = document.createElement('img')
    //   image.src = url
    //   document.body.appendChild(image)
    // }
    // if(drawing.getContext) {
    //   let context = drawing.getContext('2d')
    //   context.strokeStyle = 'red'
    //   context.strokeRect(0,0,100,100)
    //   context.strokeStyl = "rgba(0,0,255,0.5)"
    //   context.strokeRect(50,50,100,100)
    // }
    // clearRect()  可以擦除画布的某一个区域


    if(drawing.getContext) {
      let context =  drawing.getContext('2d')
      // 创建路径
      context.beginPath()
      context.arc(100,100,99,0,2*Math.PI,false)
      // 绘制内圆
      context.moveTo(194,100)
      context.arc(100,100,94,0,2  * Math.PI,false)
      // 绘制分针
      context.moveTo(100,100)
      context.lineTo(100,15)
      // 绘制时针
      context.moveTo(100,100)
      context.lineTo(35,100)
      context.stroke()

      context.font = 'bold 24px Arial'
      context.textAlign = 'center'
      context.textBaseLine = 'middle'
      context.fillStyle = 'red'
      context.fillText('12',100,30)
    }
  </script>
</body>
</html>